<include file="public@header"/>
<style>
        .name-list {
            padding:0;
            margin:0;
            list-style: none;
            margin-bottom: 15px;
        }
        .name-list li{
            display: inline-block;
            padding:0 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="name-list"></ul>
    <table class="table table-hover table-bordered table-list">
        <thead>
        <tr>
            <th width="16">
            </th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>部门</th>
        </tr>
        </thead>
        <tbody>
        <volist name="lists" id="vo">
            <tr class="data-item-tr" data-category="{:strtoupper(substr($vo['user_email'],0,1))}">
                <td>
                    <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="id"
                           value="{$vo.id}" data-name="{$vo.user_nickname}" <in name="vo.id" value="$ids">checked</in> >
                </td>
                <td>{$vo.user_nickname}</td>
                <td>{$vo.user_email}</td>
                <td>{$vo.dep_name}</td>
            </tr>
        </volist>
        </tbody>
    </table>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script>
    $(function(){
        var a = [];
        var _html = "";
        $('tr[data-category]').each(function(){
            var c = $(this).attr('data-category');
            if(a.indexOf(c) == -1){
                a.push(c);
            }
        });
        a.sort();
        for(var i in a) {
            _html=_html+"<li data-n='"+a[i]+"'>"+a[i]+"</li>"
        }
        $(".name-list").html(_html);
        $(".name-list li").click(function(){
            var _this = $(this);
            var clickval=_this.attr("data-n");
            $('tr[data-category]').hide();
            $('tr[data-category='+clickval+']').show();
            return;
        });
    });
    $('.data-item-tr').click(function (e) {

        console.log(e);
        var $this = $(this);
        if ($(e.target).is('input')) {
            return;
        }

        var $input = $this.find('input');
        if ($input.is(':checked')) {
            $input.prop('checked', false);
        } else {
            $input.prop('checked', true);
        }
    });

    function confirm() {
        var selectedCategoriesId   = [];
        var selectedCategoriesName = [];
        var selectedCategories     = [];
        $('.js-check:checked').each(function () {
            var $this = $(this);
            selectedCategoriesId.push($this.val());
            selectedCategoriesName.push($this.data('name'));

            selectedCategories.push({
                id: $this.val(),
                name: $this.data('name')
            });
        });

        return {
            selectedCategories: selectedCategories,
            selectedCategoriesId: selectedCategoriesId,
            selectedCategoriesName: selectedCategoriesName
        };
    }
</script>
</body>
</html>